<template>
	<view class="page">
		<view class="banner">
			<tpl-swiper :banner="banner"></tpl-swiper>
		</view>
		<view class="service-list">
			<navigator :url="'/pages/cms/news/detail?id='+item.id" class="service-item" v-for="(item,index) of list" :key="index">
				<image :src="item.thumb" class="service-thumb"></image>
				<view class="service-cover"><text class="service-title">{{item.title}}</text></view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			list:[],
			banner:[]
		}
	},
	onLoad(option) {
		this.getBanner();
		this.getList(option.cid);
	},
	methods:{
		getBanner(){
			this.$Request.requestAll("/program_slide/getList/",{sign:"index_banner",limit:10}).then(res=>{
				this.banner = res.data.data;
			});
		},
		getList(cid){
			this.$Request.requestAll("/program_posts/getList/",{category_id:cid,limit:4,sort:"id asc"}).then(res=>{
				this.list = res.data.data;
			});
		}
	}
}
</script>

<style lang="scss">
.service-list{
	@include tpframe-flex;
	padding: 10rpx;
}
.service-item{
	position: relative;
	@include tpframe-flex;
	margin-bottom: 10rpx;
}
.service-thumb{
	width: 360rpx;
	height: 360rpx;
}
.service-cover{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba($color:#000000, $alpha:0.4);
	@include tpframe-flex(column,center,center);
}
.service-title{
	font-size: 36rpx;
	color: #FFF;
}
</style>
